{% extends 'base.html' %}

{% block contents_inner %}
    <div class="col-md-12">
    {% csrf_token %}
        <div class="content-details" id="mapChart" style="width: 100%; height: 1080px;"></div>
    </div>
{% endblock %}

{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('mapChart'));

    $(document).ready(function () {

        $.ajax({
            url: '{% url 'chart:AQI_level_distribution' %}',
            type: 'post',
            headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
            success: function(data) {
                option = {
                    title: {
                        text: '中国空气质量等级分布图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                          type: 'category',
                          data: ['良', '优', '轻度污染', '中度污染', '重度污染', '严重污染'],
                          axisTick: {
                            alignWithLabel: true
                          }
                        }
                    ],
                    yAxis: [
                        {
                          type: 'value'
                        }
                    ],
                    series: [
                        {
                          name: 'Direct',
                          type: 'bar',
                          barWidth: '60%',
                          data: data.quality_grade_counts
                        }
                    ]
                    };
                myChart.setOption(option);
            },
            error: function(error) {
                console.error('请求数据失败:', error);
            }
        });
    });
</script>
{% endblock %}
